<!DOCTYPE html>

<html>
    <head>
        <title>全选全不选反选切换</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <input type="checkbox"/>1 
        <input type="checkbox"/>2 
        <input type="checkbox"/>3 
        <input type="checkbox"/>4
        <input type="checkbox"/>5 
        <input type="checkbox"/>5 
        <input type="checkbox"/>7
        <input type="checkbox"/>8
        <br>
        <button id="btn1">全选</button>
        <button id="btn2">全不选</button>
        <button id="btn3">反选</button>
        <button id="btn4">切换</button>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var a=true;
          $("#btn1").click(function(){
             $("input").prop("checked",true);
          });
            $("#btn2").click(function(){
             $("input").prop("checked",false);
          });
           $("#btn3").click(function(){
            $("input").each(function(){
                $(this).prop("checked",!$(this).prop("checked"));
            });
          });
          $("#btn4").click(function(){
              if(a===true){
                $("input").prop("checked",false);
                a=false;
              }else
                  if(a===false){
                    $("input").prop("checked",true);
                a=true;   
                  }
          });
        </script>
    </body>
</html>
